<template>
	<view class="content">
		<view class="location">
			<u-cell-group :border="false">
				<u-cell title="取餐点选择:" :value="location" isLink :border="false" @click="Cqshow = true;"></u-cell>
			</u-cell-group>
		</view>
		<view class="settle-list">
			<view v-for="(item,index) in settleList" :key="index">
				<view class="order-list">
					<view class="order-title flex">
						<span>{{item.day}}</span>
						<span class="item-color9">{{item.menuType == 0?'早餐':item.menuType == 1?'午餐':'晚餐'}}</span>
					</view>
					<view class="item flex" v-for="child in item.list" :key="child.id">
						<image :src="baseUrl+child.foodPic" mode="" class="item-img"></image>
						<view class="item-cont">
							<span class="item-weight">{{child.foodName}}</span>
							<view class="flex">
								<view class="amount">￥{{child.foodPrice}}</view>
								<view class="item-color9">x {{child.buyNum}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 去结算 -->
		<view class="settle">
			<view class="settle-qian">预估费用：￥ <span style="font-size: 36rpx;font-weight: bold;">{{money}}</span></view>
			<view class="settle-btn" @click="goOrder">提交订单</view>
		</view>
		<!-- 取餐点显示 -->
		<u-picker v-if="Cqshow" :show="Cqshow" :columns="Cqcolumns" @confirm="CqConfirm" @cancel='Cqshow = !Cqshow'
			keyName="dataInfo"></u-picker>
		<!-- 提交订单 -->
		<u-modal v-if="goOrderShow" :show="true" title="提交订单" content='请确认您是否要提交订单？' :showCancelButton="true" confirmColor="#5FC48D"
			@cancel="goOrderShow = false" @confirm="settleOrder"></u-modal>
	</view>
</template>

<script>
	import {
		listQcd,
		placeAnOrder
	} from '@/api/home.js'
	export default {
		data() {
			return {
				settleList: [],
				// 地点
				location: '',
				locationId: '',
				// 取餐点显示 & 列表
				Cqshow: false,
				Cqcolumns: [
					[]
				],
				baseUrl: process.uniEnv.VUE_APP_API_ROOT,
				// 总金额
				money: 0,
				// 弹窗显示
				goOrderShow: false
			};
		},
		onLoad(option) {
			this.settleList = JSON.parse(decodeURIComponent(option.settleList));
			this.theSum()
			this.listQcdHttp()
		},
		methods: {
			// 获取取餐点列表
			listQcdHttp() {
				let _this = this;
				listQcd({
					'parentId': _this.$store.state.vuex_info.cqId
				}).then(res => {
					if (res.success) {
						_this.Cqcolumns[0] = res.data ?? []
					} else {
						_this.Cqcolumns[0] = []
					}
				})
			},
			// 取餐点选择
			CqConfirm(e) {
				this.location = e.value[0].dataInfo
				this.locationId = e.value[0].id
				this.Cqshow = false
			},
			// 计算总数
			theSum() {
				let _this = this
				_this.money = 0;
				// 计算数值的总和
				_this.settleList.forEach((item) => {
					item.list.forEach((e) => {
						if (e.buyNum > 0) {
							_this.money += e.foodPrice * e.buyNum
						}
					})
				})
				_this.money = _this.keepTwoDecimalStr(_this.money)
			},
			//精确显示小数点后2位，没有时补0
			keepTwoDecimalStr(num) {
				const result = Number(num.toString().match(/^\d+(?:\.\d{0,2})?/));
				let s = result.toString();
				let rs = s.indexOf('.');
				if (rs < 0) {
					rs = s.length;
					s += '.';
				}
				while (s.length <= rs + 2) {
					s += '0';
				}
				return s;
			},
			// 下单
			goOrder() {
				if (!this.location) {
					uni.showToast({
						title: '请选择取餐点',
						icon: 'none'
					});
					return;
				}
				this.goOrderShow = true
			},
			settleOrder() {
				let _this = this
				// 计算请求次数
				let httpNum = 0;
				_this.settleList.forEach((item) => {
					let childList = item.list
					let orderFoods = []
					childList.forEach((e) => {
						orderFoods.push({
							'foodId': e.id,
							'foodNumber': e.buyNum,
						})
					})
					let data = {
						'orderFoods': orderFoods,
						'userId': _this.$store.state.vuex_info.userId,
						'menuType': item.menuType,
						'qcdId': _this.locationId,
						'orderTime': item.day
					}
					_this.goOrderShow = false
					uni.showLoading({
						title: '正在提交'
					});
					placeAnOrder(data).then(res => {
						uni.hideLoading();
						httpNum++
						if (httpNum >= _this.settleList.length) {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
							if (res.success) {
								uni.$emit('buyOk', {
									msg: '页面更新'
								})

								setTimeout(() => {
									uni.navigateBack({
										delta: 1
									})
								}, 1000)
							}
						}
					})
				})
			}
		}
	};
</script>

<style scoped lang="scss">
	page {
		height: 100%;
	}

	::v-deep.u-popup,
	.u-cell-group {
		flex: 0 !important;
	}

	.content {
		height: 100vh;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		background-color: #F8F8F8;

		.location {
			background-color: #fff;
			border-radius: 10rpx;
			margin: 20rpx;
		}

		.settle-list {
			flex: 1;
			overflow: auto;
			padding-bottom: 120rpx;

			.order-list {
				margin: 0 20rpx 20rpx;
				border-radius: 10rpx;
				overflow: hidden;
				background-color: #fff;

				.order-title {
					margin: 0 20rpx;
					padding: 20rpx 0;
					font-size: 28rpx;
					border-bottom: 1px solid #F5f5f5;
				}

				.flex {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 28rpx;
				}

				.item {
					overflow: hidden;
					padding: 20rpx;
					border-bottom: 1px solid #F8F8F8;
				}

				.item:last-child {
					border-bottom: 0
				}

				.item-img {
					width: 180rpx;
					height: 140rpx;
					margin-right: 20rpx;
				}

				.item-cont {
					flex: 1;
					height: 140rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
				}

				.amount {
					color: #ff0000;
				}

				.item-weight {
					font-weight: bold;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}

				.item-color9 {
					color: #999;
				}
			}
		}

		.settle {
			position: fixed;
			bottom: 20rpx;
			left: 2.5%;
			z-index: 10;
			width: 95%;
			border-radius: 25px;
			height: 90rpx;
			line-height: 90rpx;
			background-color: #333;
			overflow: hidden;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.settle-btn {
				background-color: #5FC48D;
				// background-color: #F4C455;
				color: #fff;
				padding: 0 60rpx;
				font-size: 32rpx;
			}

			.settle-qian {
				margin-left: 50rpx;
				color: #eee;
				font-size: 28rpx;
			}
		}
	}
</style>